<template>
<div>
  <div :style="{height:height+'px',width:width+'px'}" class="menu-wrapper">
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-name"
      >{{title}}</div>
      <div class="title-more" @click="jumpToPage">更多</div>
    </div>
    <div class="menu-box">
      <div class="menu-item">
        <div :style="{background:wait.iconBackColor,borderRadius:'50%'}">
          <svg-icon :icon-class="wait.icon" class-name="menu-icon"
            :style="{color:wait.iconColor}" />
        </div>
        <div class="card-panel-description" @click="jumpToPage('待办任务')">
          <div class="card-panel-all">
            <div class="card-panel-num" :title="waitNum">{{waitNum}}</div>
            <span style="display:flex;align-items:end;padding-bottom:2px">个</span>   
          </div>
          <div class="card-panel-text">
            待办任务
          </div>
        </div>
      </div>
      <div class="menu-item">
        <div :style="{background:done.iconBackColor,borderRadius:'50%'}">
          <svg-icon :icon-class="done.icon" class-name="menu-icon"
            :style="{color:done.iconColor}" />
        </div>
        <div class="card-panel-description" @click="jumpToPage('已办任务')">
          <div class="card-panel-all">
            <div class="card-panel-num" :title="doneNum">{{doneNum}}</div>
            <span style="display:flex;align-items:end;padding-bottom:2px">个</span>   
          </div>
          <div class="card-panel-text">
            已办任务
          </div>
        </div>
      </div>
      <div class="menu-item">
        <div :style="{background:view.iconBackColor,borderRadius:'50%'}">
          <svg-icon :icon-class="view.icon" class-name="menu-icon"
            :style="{color:view.iconColor}" />
        </div>
        <div class="card-panel-description" @click="jumpToPage('抄送我的')">
          <div class="card-panel-all">
            <div class="card-panel-num" :title="viewNum">{{viewNum}}</div>
            <span style="display:flex;align-items:end;padding-bottom:2px">个</span>   
          </div>
          <div class="card-panel-text">
            抄送我的
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="width:100%;height:20px;"></div>
</div>
</template>
<script>
  import {
    getMyTask
  } from '@/api/custom/portalDesigner';
  import {
  getMenu
  } from '@/api/system/menu';
  export default {
    props: {
      width: { //宽度
        type: Number,
        default: '300'
      },
      height: { //高度
        type: Number,
        default: '100'
      },
      title: { //标题
        type: String,
        default: '我的任务'
      },
      wait: { //待办任务
        type: Object
      },
      done: { //已办任务
        type: Object
      },
      view: { //抄送我的
        type: Object
      },
      jumpTo: { //跳转功能
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        waitNum: '', //待办任务数量
        doneNum: '', //已办任务数量
        viewNum: '' //抄送我的数量
      }
    },
    mounted() {
      this.getMyTasks()
    },
    methods: {
      //获取我的任务数量
      getMyTasks() {
        getMyTask().then((res) => {
          if (res.code === 0) {
            this.waitNum = res.data.todone
            this.doneNum = res.data.alreadydone
            this.viewNum = res.data.circulatedone
          }
        }).catch((e)=>console.log(e))
      },
      //跳转到我的任务
      jumpToPage(status) {
        const flag = this.$store.state.currentStep.clickFlag
        if(flag){
          if(status==='待办任务'){
            this.$router.push('/bpm/task/todo')
          }else if(status === '已办任务'){
            this.$router.push('/bpm/task/done')
          }else if(status === '抄送我的'){
            this.$router.push('/bpm/task/carbon')
          }else{
            this.$router.push('/bpm/task/my')
          }
        }
      }
      // async jumpToPage() {
      //   let toUrl = '/index'
      //   let urls = []
      //   let res = null
      //   while(true){
      //     res = await getMenu(res?res.data.parentId:this.jumpTo)
      //     if (res.code === 0) {
      //       if (res.data) {
      //         urls.push(res.data.path)
      //         if (res.data.parentId === 0) {
      //           break
      //         }
      //       } else {
      //         break
      //       }
      //     }
      //   }
      //   if(urls.length > 0) {
      //     toUrl = urls.reverse().join('/')
      //   }
      //   this.$router.push(toUrl)
      // },
    }
  }

</script>

<style lang="scss" scoped>
  .menu-wrapper {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    .menu-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .title-line {
        margin: 0 10px;
        width: 5px;
        height: 20px;
        background: #409eff;
      } 
      .title-name {
        width:calc(100% - 50px);
        padding-right:2% ;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .title-more {
        width: 45px;
        float: right;
        right: 0px;
        color: #409eff;
      }
    }

    .menu-box {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .menu-item {
        width: 20%;
        height: 100%;
        padding: 10px;
        display: flex;
        align-items: center;

        .card-panel-description {
          width:100%;
          margin-left:10px;
          font-weight: bold;
          .card-panel-all {
            width: 100%;
            height: 100%;
            display: flex;
          }
          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
          }

          .card-panel-num {
            font-size: 20px;
            margin-right: 5px;
            color: rgba(0, 0, 0, 0.8);
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }



  .menu-icon {
    float: left;
    font-size: 60px;
    padding: 10px;
  }

  .menu-text {
    float: right;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }

</style>
